<template>
  <el-dialog title="预览" :visible.sync="show" width="800px" :close-on-click-modal="false">
    <json-viewer 
      :value="text" 
      :expand-depth="2"
    />
  </el-dialog>
</template>
<script>
import JsonViewer from 'vue-json-viewer'

export default {
  name: 'json-view',
  components: {
    JsonViewer
  },
  data() {
    return {
      show: false,
      text: {}
    }
  },
  methods: {
    showDialog(text) {
      this.text = this.handleData(text)
      this.show = true
    },
    handleData(text) {
      if(text) {
        if(typeof text == 'string') {
          try {
            return JSON.parse(text)
          } catch(e) {
            return text // 兼容传入的不是json数据
          }
        }
      } else {
        return {}
      }
    }
  }
}
</script>
